﻿@model IEnumerable<WebDocDB.Models.Database>
@{
    ViewBag.Title = "Databases";
}

<div class="row">
    <div class="col-sm-3">
        <h3>Databases:</h3>
        <br />
        @foreach (var item in Model)
        {
            <div class="DatabaseGroup">
                <i class="glyphicon glyphicon-plus" id="iplus_@item.ID"></i>
                <i class="glyphicon glyphicon-minus" id="iminus_@item.ID" style="display: none"></i>
                @Ajax.ActionLink(item.ID, "CollectionsList", "Collections", new { databaseLink = item.Link }, new AjaxOptions() { UpdateTargetId = "pnlDatabase_" + @item.ID, OnSuccess = "expandDatabase('" + @item.ID + "', '" + @item.Link + "')", OnFailure = "databaseError()" }, new { @class = "Database", id = "Database_" + @item.ID })                
                <div id="pnlDatabase_@item.ID"></div>
            </div>
            <br />
        }


    </div>
    <div class="col-sm-9">
        <div style="height: 55px;">
            <div id="pnlAlert" class="alert alert-danger" role="alert" style="display: none"></div>
        </div>
        <br />
        <div class="panel panel-default">
            <div class="panel-heading">
                @Html.Partial("_MenuToolbar")
            </div>
            <div class="panel-body">                
                <div id="pnlContent">
                    <i>Select a Database or create a new one</i>
                </div>                
            </div>
        </div>
    </div>
</div>


@section Scripts
{
    <script>
        var selectedDatabaseLink = "";
        var selectedDatabaseID = "";

        function expandDatabase(databaseId, databaseLink) {
            //Collapse all databases
            $("[id^=iplus_]").show();
            $("[id^=iminus_]").hide();
            $("[id^=pnlNewCollection_]").hide();
            $("[id^=pnlDatabase_]").hide();
            $("[id^=Database_]").css({ 'font-weight': 'normal' });
            $('#btnAddCollection').hide();
            $('#btnDeleteCollection').hide();
            hideQueryManager();

            //Show the selected one
            $('#iplus_' + databaseId).toggle();
            $('#iminus_' + databaseId).toggle();
            $('#pnlNewCollection_' + databaseId).toggle();
            $('#pnlDatabase_' + databaseId).toggle();
            $('#Database_' + databaseId).css({ 'font-weight': 'bold' });
            $('#btnDeleteDatabase').show();
            $('#btnAddCollection').show();
            $('#btnExecuteQuery').show();

            selectedDatabaseLink = databaseLink;
            selectedDatabaseID = databaseId;
        }

        function databaseError() {
            showError('Error on retrieving Database data');
        }        
    </script>
}
